<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    // 传统的this指向
    // 1. 普通函数(命名函数, 匿名函数 => 函数调用时没有依存的对象)  this => window(严格模式 undefined)
    // 2. 函数调用时有依存的对象  => 属于谁就指向谁  (1. obj.xxx()  2. 事件)
    // 3. 箭头函数没有自己的this指向, 它的this依赖于箭头函数定义时上层作用域的this, (简单的来说,就是依赖于父作用域的this指向 => 箭头函数中遇到this,就向外跳一层找父作用域,如果父作用域也是箭头函数,就继续向外跳一层, 依次类推,直到全局为止)


    // 单层箭头函数   =>  this -> window
    // let fn = () => {
    //     console.log(1,this);
    // }
    // fn();

    // setTimeout(()=>{
    //     console.log(2, this);
    // },0)

    // var zhang = {
    //     name:"张三",
    //     age:18,
    //     say:()=>{
    //         console.log(3, this);
    //         console.log(this.name,this.age);
    //     }
    // }
    // zhang.say();

    // document.onclick = ()=>{
    //     console.log(4, this);
    // }


    // 普通函数嵌套箭头函数  => this依赖于父作用域

    // setTimeout(function(){
    //     console.log(1, this); // this -> window

    //     let fn = () => {  
    //         console.log(1,this); // this -> window
    //     }
    //     fn();
    // },0)

   /*  var zhang = {
        name:"张三",
        age:18,
        say:function(){
            console.log(2,this); // this -> zhang
            // console.log(this.name,this.age);

            let fn = () => {  
                console.log(2,this); // this -> zhang
            }
            fn();
        }
    }
    zhang.say(); */

    // document.onclick = function(){
    //     console.log(3, this); // this -> document

    //     let fn = () => {  
    //         console.log(3,this); // this -> document
    //     }
    //     fn();
    // }


    // 箭头函数嵌套箭头函数
    setTimeout(()=>{
        console.log(1, this);  // this -> window
        
        let fn = () => {  
            console.log(1,this); 
        }
        fn();
    },0)





</script>
</html>